<template>
    <div>
      <easy-player
          ref="player"
          :video-url="videoUrl"
          :showEnterprise="false"
          style="width:400px;height:300px"
          >
      </easy-player>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from "vue";

  const videoUrl = ref("http://192.168.0.151:18000/flv/live/stream_26_0.flv");
  const isPlay = ref(false);
  const config = ref({
    hasAudio: true,
    isLive: true,
    MSE: false,
    WCS: false,
  });
  let playerInfo = null;
  const playerBox = ref(null);
  
  const playCreate = () => {
    const container = playerBox.value;
    const easyplayer = new EasyPlayerPro(container, {
      isLive: config.value.isLive,
      bufferTime: 0.2,
      stretch: false,
      MSE: config.value.MSE,
      WCS: config.value.WCS,
      hasAudio: config.value.hasAudio,
      watermark: { text: { content: "easyplayer-pro" }, right: 10, top: 10 },
    });
  
    easyplayer.on("fullscreen", (flag) => {
      console.log("is fullscreen", flag);
    });
  
    playerInfo = easyplayer;
  };
  
  const toggleAudio = () => {
    config.value.hasAudio = !config.value.hasAudio;
    if (isPlay.value) {
      destroyPlayer().then(() => {
        playCreate();
        onPlayer();
      });
    }
  };
  
  const setFullscreen = () => {
    if (playerInfo) playerInfo.setFullscreen(true);
  };
  
  const onPause = () => {
    if (playerInfo) playerInfo.pause();
  };
  
  const onMute = () => {
    if (playerInfo) playerInfo.setMute(true);
  };
  
  const onPlayer = () => {
    isPlay.value = true;
    setTimeout(() => {
      playerInfo?.play(videoUrl.value).catch((e) => console.error(e));
    }, 0);
  };
  
  const onPlayerPlayback = () => {
    destroyPlayer().then(() => {
      playCreate();
      config.value.isLive = false;
      setTimeout(() => {
        playerInfo?.play(videoUrl.value).catch((e) => console.error(e));
      }, 0);
    });
  };
  
  const onStop = () => {
    isPlay.value = false;
    destroyPlayer().then(() => {
      playCreate();
    });
  };
  
  const onReplay = () => {
    destroyPlayer().then(() => {
      playCreate();
      onPlayer();
    });
  };
  
  const destroyPlayer = () => {
    return new Promise((resolve) => {
      if (playerInfo) {
        playerInfo.destroy();
        playerInfo = null;
      }
      setTimeout(() => resolve(), 100);
    });
  };
  
  onMounted(() => {
    playCreate();
  });
  
  onBeforeUnmount(() => {
    destroyPlayer();
  });
  </script>
  
  <style scoped>
  /* Your styles here */
  .player_container {
    display: grid;
    width:400px;height: 300px;
  }
  
  .player_item {
    position: relative;
    padding-bottom: 56%;
    background-color: #000;
    border: 1px #fff solid;
  }
  
  .inputs {
    width: 100%;
    max-width: 600px;
  }
  
  .df {
    display: flex;
    align-items: center;
  }
  </style>
  